<template>
  <div>
    {{ num }}
    <button @click="add">增加</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <p>{{ sumTotal }}</p>
    <child-news
      :num="num"
      :addChild="add"
      @getSum="getSumParent"
      ref="child"
    ></child-news>
    <child-list></child-list>
  </div>
</template>

<script>
import News from '../News/index.vue'
import List from '../List/index.vue'
export default {
  name: 'Home',
  components: {
    'child-news': News,
    'child-list': List,
  },
  data() {
    return {
      num: '12',
      sumTotal: '',
      arr: [1, 2, 3],
    }
  },
  mounted() {
    // console.log(this);
    console.log(this.$children, '子组件')
  },
  methods: {
    add() {
      // this.num++
      this.$refs.child.emitPar()
    },
    getSumParent(val) {
      console.log(val, '++++++')
      this.sumTotal = val
    },
  },
}
</script>

<style lang="less" scoped></style>
